<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>23_扩展-firstChild</title>

        <style>
            /* （1）基本使用 */
            /* ul li:first-child {
                color: red;
            } */


            /* （2）找到第一个li标签  （按照所有兄弟计算的）  而
            第一个兄弟是span */
            /* ul li:first-child {
                color: red;
            } */

            /* （3） 不管标签结构如何嵌套  那么只要是ul的第一个儿子 就可以*/
            /* ul li:first-child {
                color: red;
            } */


            /* (4) */
            ul li:first-child {
                color: red;
            }


            /* 总结：first-child 在所有的儿子中去寻找  包含了li和span 并且还要满足
            是第一个  2个条件需要同事满足
            */


        </style>
    </head>
    <body>

        <ul>
            <li>张三</li>
        </ul>

        <ul>
            <!-- <span>超级玛丽</span> -->
            <li>csgo</li>
            <li>云顶之弈</li>
            <li>逃离塔科夫</li>
            <li>双人成行</li>
            <li>
                <ul>
                    <li>cs666</li>
                    <li>跑跑卡丁车</li>
                    <li>qq炫舞</li>
                </ul>
            </li>
        </ul>
    </body>
</html>